App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();

    app.defineLayer("str-linear-gradient", {
        render: function (next) {
            this.initProperty();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        initProperty: function () {
            var property = this.property;

            property.id = property.id || this.uid;
            var ratio = window.devicePixelRatio;
            this.data.options = htmlTool.getOptions(this.slot);
            this.setGradient({
                id: property.id,
                type: "linear",
                left: this.x1 * ratio,
                top: this.y1 * ratio,
                right: this.x2 * ratio,
                bottom: this.y2 * ratio,
                options: this.data.options
            });
            this.data.attributeStr = this._createPropertyStr(property);
        },
        draw: function () {
            return true;
        },
        removeOption: function (index) {
            this.data.options.slice(index, 1);
            this.resetOption();
        },
        appendOption: function (value, color) {
            this.data.options.push({ value: value, color: color });
            this.resetOption();
        },
        changeOption: function (index, value, color) {
            var option = this.data.options[index];
            if (!option) return;
            option.value = value;
            option.color = color;
            this.resetOption();
        },
        resetOption: function () {
            var property = this.property;
            var parentCanvas = this._getCanvas();
            var components = parentCanvas.getUseGradients(property.id);
            var ratio = window.devicePixelRatio;
            parentCanvas.resetLinearGradientById({
                id: property.id,
                left: this.x1 * ratio,
                top: this.y1 * ratio,
                right: this.x2 * ratio,
                bottom: this.y2 * ratio,
                options: this.data.options
            });
            if (!components) return;
            for (var i = 0; i < components.length; i++) components[i].data.isChange = true;
        },
        set x1(value) {
            if (this.setValue("x1", value)) {
                this.resetOption();
            }
        },
        get x1() {
            return this.getValue("x1");
        },
        set y1(value) {
            if (this.setValue("y1", value)) {
                this.resetOption();
            }
        },
        get y1() {
            return this.getValue("y1");
        },
        set x2(value) {
            if (this.setValue("x2", value)) {
                this.resetOption();
            }
        },
        get x2() {
            return this.getValue("x2");
        },
        set y2(value) {
            if (this.setValue("y2", value)) {
                this.resetOption();
            }
        },
        get y2() {
            return this.getValue("y2");
        }
    });
})